<script setup lang="ts">
// import QueryResult from '@/composables/useUsers'
import axios from 'axios'

// 默认用户头像
const circleUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
let tableData = ref([
  {
    age: '',
    createtime: [],
    expiretime: [],
    gender: '',
    image: '',
    password: '',
    phone: '',
    state: '',
    updatetime: [],
    userid: '',
    username: '',
    usertypeid: '',
    vip: ''
  }
])

// 获取用户信息(网页打开)

const getUsers = () => {
  axios({
    method: 'get',
    url: 'http://localhost:8080/manage/usergetall',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    }
  }).then(
    (res) => {
      console.log(res.data.data)
      tableData.value = res.data.data
      // tableData.value =
    },
    (err) => {
      console.log(err)
      ElMessage.error('获取用户信息失败,Token可能过期,或者网络问题')
    }
  )
}
getUsers()
// 删除用户按钮
function deleteUser() {
  // tableData.value = [
  //   {
  //     1
  //   }
  // ]
}
</script>

<template>
  <el-card class="box-card">
    <!-- <template #header>
      <div class="card-header">
        <span>这里是管理员用户管理页面</span>
      </div>
    </template> -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" width="80" prop="userid" label="用户ID" />
      <el-table-column align="center" width="80" label="头像" v-slot="{ row }">
        <el-avatar :size="40" :src="row.image || circleUrl" />
      </el-table-column>

      <el-table-column align="center" width="80" prop="username" label="姓名" />
      <el-table-column align="center" width="120" prop="phone" label="电话" />
      <el-table-column align="center" width="200" prop="createtime" label="注册时间" />
      <el-table-column align="center" width="80" prop="gender" label="性别">
        <template #default="{ row }">
          <el-tag effect="plain" size="small" type="primary" v-show="row.gender == 1">男 </el-tag>
          <el-tag effect="plain" size="small" type="danger" v-show="row.gender == 0"> 女</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" prop="age" label="年龄" />
      <el-table-column align="center" width="80" prop="vip" label="vip">
        <template #default="{ row }">
          <el-tag effect="plain" size="small" type="primary" v-show="row.vip == 1">是</el-tag>
          <el-tag effect="plain" size="small" type="danger" v-show="row.vip == 0">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="200" prop="expiretime" label="vip到期时间" />
      <!-- <el-table-column align="center" width="120" label="操作">
        <el-button type="default" @click="deleteUser"> 删除用户</el-button>
      </el-table-column> -->
    </el-table>

    <template #footer> 没有更多用户了... </template>
  </el-card>
</template>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: auto;
}
</style>
